<template>
  <div>
    <!-- <editor-bar
      v-model="content"
      :isClear="isClear"
      @change="change"
    ></editor-bar>-->
    <div style="width:75%;float:left">
      <vue-ueditor-wrap v-model="content" :config="myConfig"></vue-ueditor-wrap>
    </div>
    <div
      style="width:25%;
    padding-right:10px;
    float:left;
    text-align:left;
    height: 577px;
    overflow-y: scroll;"
    >
      <el-form
        ref="recordForm"
        :model="recordData"
        :rules="recordRules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="门诊号" prop="clinicNo">
          <el-input
            v-model="recordData.clinicNo"
            placeholder="请输入门诊号"
            clearable
            :style="{width: '100%'}"
          ></el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

      <button @click="printDemo">测试打印</button>
      <vue-easy-print tableShow ref="easyPrint" v-show="false">
        <template slot-scope="func">
          <!--<demo :getChineseNumber="func.getChineseNumber"></demo>-->
          <print :record="record"></print>
        </template>
      </vue-easy-print>

      <div class="params" v-html="params"></div>
    </div>

    <div class="record" v-html="record"></div>
  </div>
</template>
<script>
  import vueEasyPrint from "vue-easy-print";
  import demo from "@/components/Clinic/demo";
  import print from "@/components/Clinic/print";

  import {getReport, getReportParam, editReportTempl} from "@/api/report";
  import {getResults} from "@/utils/info-tree-report";
  import {getTree} from "@/utils/info-item-tree";

  import VueUeditorWrap from "vue-ueditor-wrap"; // ES6 Module

  export default {
    components: {VueUeditorWrap, vueEasyPrint, demo, print},
    name: "Template",
    props: {
      item: Object
    },
    data() {
      return {
        recordData: {
          clinicNo: "010120050802111116"
        },
        recordRules: {
          clinicNo: [
            {
              required: true,
              message: "请输入门诊号",
              trigger: "blur"
            }
          ]
        },
        params: "",
        isClear: false,
        record: "",
        result: {
          "医生;建议":
          "定期检查每3~6月带孩子复查视力，建立屈光档案，及时发现孩子视力异常情况，避免过早的正视化，近视加深。" +
          "做到早发现，早干预，早治疗。遵从医嘱，选择正确的戴镜用眼习惯，控制近视进一步加深。",
          裸眼视力正常值: "3岁（0.2-0.3），4~6岁（0.4-0.7），7~8岁（0.8~1.0）",
          电脑验光正常值:
            "3~6岁（远视储备+200~+175度），7~9岁（远视储备+150~+100度），10~12岁（远视储备 +100~+75度）。",
          眼轴正常值:
            "3~6岁（21~22.5mm），7~9岁（22.5~23mm），10~12岁（23~24mm）。",
          说明:
          "屈光度数（电脑验光）结果中的【球镜】度数若为负值“-”表示近视，若为正值“+”表示远视" +
          "（如：-1.00代表近视100度，+1.50代表远视150度）；" +
          "【柱镜】为散光度数；【轴位】为散光的方向，数值在0-180°之间，有散光度数才会有散光轴位。" +
          "（举例：-1.25/-0.75*180代表近视125度，散光75度，散光轴位在180°方向。）"
        },
        content: "<h2>请输入报告模板,选择左侧的参数集进行模板编辑</h2>",
        myConfig: {
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: "500",
          // 初始容器宽度
          initialFrameWidth: "100%",
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
          serverUrl: "http://35.201.165.105:8000/controller.php",
          // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
          UEDITOR_HOME_URL: process.env.BASE_URL + "UEditor/"
        }
      };
    },
    watch: {
      content() {
        this.record = this.content.format(this.result);
        this.item.content = this.content
      },
      result() {
        this.record = this.content.format(this.result);
        this.item.content = this.content
      }
    },
    created() {
      console.log(this.item);
      window.template = this;
      //编辑
      if (this.item.id) {
        getReport({id: this.item.id}).then(response => {
          if (response.code === 200 && response.page && response.page.context) {
            this.content = response.page.context;
            this.submitForm();
          }
        });
      }
    },
    mounted() {
    },
    methods: {
      printDemo() {
        this.$refs.easyPrint.print();
      },
      submitForm() {
        this.$refs["recordForm"].validate(valid => {
          if (!valid) return;
          // TODO 提交表单
          this.getRecord();
        });
      },
      resetForm() {
        this.$refs["recordForm"].resetFields();
      },
      getRecord() {
        if (this.recordData.clinicNo === "") {
          this.params = "";
          return;
        }
        let _that = this;
        getReportParam({clinicNo: this.recordData.clinicNo}).then(response => {
          if (response.code === 200) {
            _that.params = response.page.list;
            let tree = getTree(_that.params);
            console.log(tree);
            _that.params = "";
            _that.result = {};
            response.patient.gender = response.patient.gender === 1?"男":"女"
            response.patient.date = new Date().Format("yyyy-MM-dd");
            for(let k in response.patient){
              _that.params +=
                "<p style='padding-left: 4%'>{" +
                k +
                "} : <span class='overFont'>" +
                response.patient[k] +
                "</span></p>";
              _that.result[k] = response.patient[k];
            }
            for (let k in tree) {
              let result = getResults(tree[k]);
              result.forEach(function (item) {
                _that.params +=
                  "<p style='padding-left: 4%'>{" +
                  item.key +
                  "} : <span class='overFont'>" +
                  item.indicatorsActVal +
                  "</span></p>";
                _that.result[item.key] = item.indicatorsActVal;
              });
            }
          }
        });
      },
      change(val) {
        console.log(val);
      }
    }
  };
</script>
<style scoped>
  .overFont {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
